<template>
  <li class="mycard d-flex">
    <!-- 博主发表 -->
    <!-- <div class="left">
      <img src="../static/imgs/images/myUser.jpg" alt="">
    </div> -->
    <div class="right">
      <!-- <div>
        <div class="header">
          <div class="user">
            <span class="name">君惜泪</span>
            <span class="title rounded ms-2">巅峰</span>
          </div>
        </div>
        <div class="text">
          评论
        </div>
        <div class="box d-flex justify-content-between">
          <div class="time">
            <span>时间</span>
          </div>
          <div class="box-right">
            <span></span>
            <i :class="['bi bi-chat-left-text']"></i>
            <i :class="['bi bi-pencil-square']"></i>
          </div>
        </div>
      </div> -->
      <!-- 发表留言 -->
      <div class="write">
        <div class="write-header">
          <i class="bi bi-pencil-square me-1"></i>
          <span>{{ path == '/detail' ? '评论' : '留言' }}</span>
        </div>
        <textarea v-model="text" placeholder="留下点什么..."></textarea>
        <div class="write-footer">
          <button @click="clickPublish" class="btn text-light">发表</button>
        </div>
      </div>

      <!-- 留言列表 -->
      <div class="comment">
        <div class="comment-header">
          <i class="bi bi-chat-left-text"></i>
          <span>{{ wishArr ? wishArr[0]?.total : '' }}条{{ path == '/detail' ? '评论' : '留言' }}</span>
        </div>
        <div class="comment-content">
          <div v-for="item in wishArr" :key="item.id" class="comment-item ">
            <div class="left">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="right">
              <div class="header">
                <div class="user">
                  <span class="name">{{ item.username }}</span>
                  <span class="title rounded ms-2">巅峰</span>
                </div>
              </div>
              <div class="time">
                <span>{{ item.createAt }}</span>
              </div>
              <div class="text">
                {{ item.wish_text }}
              </div>
            </div>
          </div>
        </div>
        <div class="more text-center">
          <div v-if="!hasMoreData">我也是有底线的~~~</div>
          <button v-if="hasMoreData" @click="more" class="btn  btn-outline-warning">查看更多</button>
        </div>
      </div>
    </div>
  </li>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCounterStore } from "@/stores/counter"
import { useRoute } from 'vue-router';
const counter = useCounterStore()
const route = useRoute()
interface Wish {
  id: number;
  user_id: number;
  createAt: string;
  username: string;
  wish_text?: string;
  imgUrl: string;
  total: number;
}
defineProps<{ wishArr: Wish[], hasMoreData: boolean }>()
const path = route.path
// console.log(path)

const text = ref<string>('')

// 定义emit函数
const emit = defineEmits(['publish', 'more']);
// 点击发表

const clickPublish = () => {
  emit('publish', {
    wish_text: text.value,
    imgUrl: counter.userData.imgUrl,
    username: counter.userData.username,
    user_id: counter.userData.id
  })
  text.value = ''
}
const more = () => {
  emit('more', {
    page_size: 5
  })
}





</script>

<style lang="less" scoped>
.left {
  width: 50px;

  img {
    width: 100%;
    border-radius: 10px;
  }
}

.right {
  width: 100%;

  .header {
    .user {
      .name {
        color: #737070;
        vertical-align: middle;
      }

      .title {
        color: #FFA500;
        border: 1px solid #FFA500;
        vertical-align: middle;
        font-size: 10px;
        padding: 0 2px;
      }
    }
  }

  .time {
    font-size: 12px;
    color: #7d7b7b;
  }

  .text {
    margin: 10px 0;
  }

  .box-right {
    padding: 0 5px;
    border-radius: 5px;
    background-color: #f0f0f0;

    span {
      color: #7d7b7b;
      font-size: 12px;
      vertical-align: middle;
    }

    i {
      color: #7d7b7b;
      font-size: 12px;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 5px;

      &.active {
        color: #FFA500;
      }

      &:hover {
        color: #FFA500;
      }
    }
  }

  .write {
    width: 100%;

    .write-header {
      color: #FFA500;
      margin: 10px 0;

      i {
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }
    }

    textarea {
      width: 100%;
      height: 120px;
      padding: 5px;
      border-radius: 5px;
      outline: none;
      border: 1px solid #FFA500;
      font-size: 15px;
    }

    .write-footer {
      text-align: right;

      .btn {
        padding: 2px 10px !important;
        background-color: #837BC7;
      }
    }
  }

  .comment {
    width: 100%;

    .comment-header {
      color: #FFA500;
      font-size: 14px;

      span {
        margin-left: 5px;
      }
    }

    .comment-content {
      .comment-item {
        display: flex;
        margin: 10px 0;

        .right {
          padding-left: 10px;

          .time {
            margin-top: 5px;
            font-size: 10px;
          }

          .text {
            padding: 15px 10px;
            background-color: #f0f0f0;
            border-radius: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
